<!---
需要  privide getToken
-->
<template>
  <div>
    <el-dialog v-model="state.showDialog" :title="title" draggable width="600px">
      <div>
        <el-upload
          ref="uploadRef"
          :action="uploadAction"
          :headers="uploadHeaders"
          :data="{ fileDirectory: state.fileDirectory, fileReName: state.fileReName }"
          drag
          multiple
          :auto-upload="false"
          :on-success="onSuccess"
        >
          <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
          <div class="el-upload__text">拖拽上传或<em>点击上传</em></div>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClear" size="default">清空已上传</el-button>
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSure" size="default" :loading="state.sureLoading">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed,inject } from 'vue'
import { UploadFile, UploadFiles,UploadInstance } from 'element-plus'
//import { getToken } from '/@/api/admin/http-client' 
import eventBus from '../../../../utils/mitt' 
const getToken= inject('getToken') 
const uploadRef = ref(null)
 
defineProps({
  title: {
    type: String,
    default: '',
  },
})

const state = reactive({
  showDialog: false,
  sureLoading: false,
  fileDirectory: 'bpm',
  fileReName: true,
  fileList: [],
})

const uploadAction = computed(() => {
  return import.meta.env.VITE_API_URL + '/api/admin/file/upload-file'
})

const uploadHeaders = computed(() => {
  return { Authorization: 'Bearer ' + getToken() }
})

// 打开对话框
const open = async (row) => {
  state.showDialog = true
}

// 上传成功
const onSuccess = (response, uploadFile, uploadFiles) => {
  if (response?.success) { 
    
    eventBus.emit('refreshFile',response.data)
  }
}

// 清空已上传
const onClear = async () => {
  if(uploadRef.value){
    uploadRef.value.clearFiles(['success', 'fail'])
  }
}

// 取消
const onCancel = () => {
  state.showDialog = false
}

// 确定
const onSure = async () => {
  if(uploadRef.value){
    uploadRef.value.submit()
  }
  state.showDialog=false
}

defineExpose({
  open,
  
})
</script>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'admin/file/upload',
})
</script>

<style scoped lang="scss">
.my-el-alert {
  border: none;
  padding-left: 5px;
  padding-right: 5px;
}
</style>
